<template>
  <div class="sort">
    <el-row style="height: 100%;width: 100%" justify="center">
      <el-col :span="16">
        <div style="height: 60px;display: flex;justify-content: center;align-items: center">
          <h2 style="color: #00b2ff">文章管理</h2>
        </div>
        <el-row style="margin-top: 100px" :gutter="20">
          <el-col :span="12">
            <div>
              <el-card class="box-card">
                <template #header>
                  <div class="sort-menu">
                    <span>{{ $t('message.sortTitle') }}</span>
                    <el-button class="button" size="small" @click="addSortBtn">{{
                        $t('message.sortAddBtn')
                      }}
                    </el-button>
                  </div>
                </template>
                <div class="sort-box">
                  <span>{{ $t('message.MenuName') }}：</span>
                  <el-input style="margin-top: 20px;margin-bottom: 20px" v-model="menuName"
                            @keyup.enter="addSortBtn"></el-input>
                  <span>{{ $t('message.menuUrlIndex') }}：</span>
                  <el-input style="margin-top: 20px" v-model="menuUrlName"
                            @keyup.enter="addSortBtn"></el-input>
                </div>
              </el-card>
            </div>
          </el-col>
          <el-col :span="12">
            <div>
              <el-card class="box-card">
                <template #header>
                  <div style="display: flex;justify-content: space-between;align-items: center">
                    <div class="sort-menu">
                      <span>{{ $t('message.sortMenu') }}</span>
                    </div>

                    <div class="sort-menu">
                      <el-button size="small" type="primary" @click="saveMenuBtn">{{
                          $t('message.sortMenuSaveBtn')
                        }}
                      </el-button>
                    </div>
                  </div>
                </template>
                <div class="sort-box">
                  <draggable
                      v-model="draggableList"
                      group="people"
                      @start="drag=true"
                      @end="drag=false"
                      item-key="urlName">
                    <template #item="{element}">
                      <div class="drag-item">
                        <div style="padding-left: 20px;display: flex">
                          <div style="display: flex">
                            <span style="width: 90px">菜单名称：</span>
                            <span style="width: 150px">{{ element.name }}</span>
                          </div>
                          <div>
                            <span  style="width: 90px">Url名称：</span>
                            <span  style="width: 150px">{{ element.urlName }}</span>
                          </div>
                        </div>
                        <div style="padding-right: 10px">
                          <el-button size="mini" type="danger" @click="deleteMenuBtn(element.name)">
                            {{ $t('message.sortDeleteBtn') }}
                          </el-button>
                        </div>
                      </div>
                    </template>
                  </draggable>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import Classification from "./Classification";
import draggable from 'vuedraggable'

export default {
  name: "Classification",
  components: {
    draggable
  },
  setup() {
    return {
      ...Classification()
    }
  }
}
</script>

<style scoped>
.sort {
  height: 100%;
}

.header {
  height: 60px;
}

.sort-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sort-box {

}

.drag-item {
  border: 1px solid #ccc;
  height: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  margin-top: 10px;
  border-radius: 5px;
  background: rgba(243, 243, 243, 0.82);
}

</style>